<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <script>
        /* let total = 100000
        let timer = Date.now()
        // 新版本浏览器变化，JS 执行完后会一并怼到页面
        for (let i = 0; i < total; i++) {
            let li = document.createElement('li');
            li.innerHTML = i;
            container.appendChild(li)
        }
        // 算的是 for 循环执行的时间，而不是渲染时间

        // console.log(Date.now() - timer)
        setTimeout(() => {
            // 渲染是在下一个宏任务执行之前，JS 执行 + 渲染
            console.log(Date.now() - timer)
        }, 0); */

        // 分片：根据数据大小划分，每次加载固定的数量
        /* let total = 100000
        let index = 0;
        let id = 0
        function load() {
            index += 50
            if (index < total) {
                for (let i = 0; i < 50; i++) {
                    let li = document.createElement('li')
                    li.innerHTML = id++
                    container.appendChild(li)
                }
                load()
            }
        }
        load() */
        /* let total = 100000
        let index = 0;
        let id = 0
        function load() {
            index += 50
            if (index < total) {
                for (let i = 0; i < 50; i++) {
                    let li = document.createElement('li')
                    li.innerHTML = id++
                    container.appendChild(li)
                }
                load()
            }
        }
        load() */
        /* let total = 100000
        let index = 0;
        let id = 0
        function load() {
            index += 50
            if (index < total) {
                // 定时器是一个宏任务，会等待 UI 渲染完成后执行
                // 先渲染 50 个，等待渲染完毕后，再渲染 50 个
                setTimeout(() => {
                    for (let i = 0; i < 50; i++) {
                        let li = document.createElement('li')
                        li.innerHTML = id++
                        container.appendChild(li)
                    }
                    load()
                }, 0)
            }
        }
        load() */

        /* let total = 100000
        let index = 0;
        let id = 0
        function load() {
            index += 50
            if (index < total) {
                // requestAnimationFrame 也是一个宏任务，可以配合浏览器的刷新频率
                requestAnimationFrame(() => {
                    for (let i = 0; i < 50; i++) {
                        let li = document.createElement('li')
                        li.innerHTML = id++
                        container.appendChild(li)
                    }
                    load()
                })
            }
        }
        load() */

        let total = 100000
        let index = 0;
        let id = 0
        function load() {
            index += 50
            if (index < total) {
                // requestAnimationFrame 也是一个宏任务，可以配合浏览器的刷新频率
                requestAnimationFrame(() => {
                    let fragment = document.createDocumentFragment()
                    for (let i = 0; i < 50; i++) {
                        // IE 浏览器进行性能优化
                        let li = document.createElement('li')
                        li.innerHTML = id++
                        fragment.appendChild(li)
                    }
                    container.appendChild(fragment)
                    load()
                })
            }
        }
        load()
    </script>
</body>

</html>